<template>
  <div class="index">
    <Location class="index-location" type="praise" />
    <div class="index-praise">
      <div class="index-left">
        <div
          v-for="p in list.praiseList"
          :key="p.comment_id"
          class="index-left-item"
        >
          <img class="index-left-item-one" :src="p.user_img" />
          <div class="index-left-item-two">
            <div class="index-left-item-two-nick">{{ p.username }}</div>
            <div class="index-left-item-two-type">
              【{{ p.shop_type_name }}】
            </div>
            <div class="index-left-item-two-company">
              {{ p.shop_name }}
            </div>
          </div>
          <div class="index-left-item-three" :v-html="p.content">
            <!-- <div class="index-left-item-three-red">
              “前俩天推荐的客户成交了，拿货100000元”
            </div>
            <div class="index-left-item-three-black">
              中科博园合作9年，我们继续携手下一个9年
            </div>
            <img
              class="index-left-item-three-pic"
              src="@/assets/images/image(24).png"
            /> -->
            <div class="index-left-item-three-black">效果好口碑</div>
          </div>
          <div class="index-left-item-four">{{ p.add_time }}</div>
        </div>
      </div>
      <div class="index-right">
        <div class="index-right-title">
          <img
            class="index-right-title-icon"
            src="@/assets/images/image(43).png"
          />
          <div class="index-right-title-name">我要招商</div>
        </div>
        <div class="index-right-list">
          <div
            v-for="m in list.merchantList"
            :key="m.goods_id"
            class="index-right-list-item"
            @click="handleOneGoods(item.goods_id)"
          >
            <div class="index-right-list-item-left">
              <img
                class="index-right-list-item-avatar"
                :src="imgUrl + m.original_img"
              />
            </div>
            <div class="index-right-list-item-msg">
              <div class="index-right-list-item-msg-title">
                {{ m.goods_name }}
              </div>
              <div class="index-right-list-item-msg-price">
                ¥{{ m.shop_price }}
              </div>
            </div>
          </div>
        </div>
        <div class="index-right-title">
          <img
            class="index-right-title-icon"
            src="@/assets/images/image(52).png"
          />
          <div class="index-right-title-name">我要代理</div>
        </div>
        <div class="index-right-list">
          <div
            v-for="p in list.proxyList"
            :key="p.goods_id"
            class="index-right-list-item"
            @click="handleOneGoods(item.goods_id)"
          >
            <div class="index-right-list-item-left">
              <img
                class="index-right-list-item-avatar"
                :src="imgUrl + p.original_img"
              />
            </div>
            <div class="index-right-list-item-msg">
              <div class="index-right-list-item-msg-title">
                {{ p.goods_name || "暂无商品名" }}
              </div>
              <div class="index-right-list-item-msg-price">
                ¥{{ p.shop_price }}
              </div>
            </div>
          </div>
        </div>
        <div class="index-right-title">
          <img
            class="index-right-title-icon"
            src="@/assets/images/image(34).png"
          />
          <div class="index-right-title-grow">行业资讯</div>
          <div class="index-right-title-more" @click="handleRoute">更多</div>
          <img
            class="index-right-title-go"
            src="@/assets/images/image(29).png"
            @click="handleRoute"
          />
        </div>
        <div class="index-right-msg">
          <div
            v-for="i in list.industryList"
            :key="i.id"
            class="index-right-msg-list"
            @click="handleIndustryDetails(i.id)"
          >
            {{ i.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ToastBottom, setObj, getObj } from "@/utils/index";
import { onMounted, computed, ref, reactive, toRefs, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
import Location from "@/components/location/index";
//获取路由
const $_route = useRoute();
const $_router = useRouter();
//获取接口
const imgUrl = computed(() => {
  return process.env.VUE_APP_BASE_API;
});
//获取接口
const $_api = inject("$api");
onMounted(() => {
  //获取广告页面
  api.getCommentList();
});
//联系我们
const api = reactive({
  //获取广告页面
  getCommentList: async () => {
    const results = await $_api.commentList();
    if (results && results.status > 0) {
      console.log(results.data, "commentList");
      list.praiseList = results.data.xinxi;
      list.merchantList = results.data.zhaoshang;
      list.proxyList = results.data.daili;
      list.industryList = results.data.zixun;
    }
  },
});
const list = reactive({
  praiseList: [],
  merchantList: [],
  proxyList: [],
  industryList: [],
});
const handleRoute = () => {
  $_router.push({
    path: "/industry",
  });
};
// 资讯详情
const handleIndustryDetails = id => {
  $_router.push({
    path: `/industryDetail/${id}`,
  });
};
const handleOneGoods = id => {
  $_router.push({
    path: `/goods`,
    query: {
      id,
    },
  });
};
</script>

<style lang="scss" scoped>
.index {
  @include flex(flex-start, center);
  flex-direction: column;
  margin: 5px auto 0;
  width: 1200px;
}
.index-location {
  flex-shrink: 0;
  width: 100%;
  height: 105px;
}
.index-praise {
  @include flex(flex-start, center);
  margin-top: 13px;
  margin-bottom: 20px;
  width: 100%;
  height: 1105px;
}
.index-left {
  @include flex(flex-start, center);
  flex-direction: column;
  margin-right: 10px;
  width: 863px;
  height: 100%;
  flex-shrink: 0;
}
.index-left-item {
  @include flex(flex-start, flex-start);
  margin-bottom: 10px;
  padding: 12px 10px;
  // flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
  height: 213px;
  box-sizing: border-box;
  border: 1px solid #e1e1e1;
}
.index-left-item:last-child {
  margin-bottom: 0px;
}
.index-left-item-one {
  flex-shrink: 0;
  margin-right: 13px;
  width: 36px;
  height: 36px;
}
.index-left-item-two {
  @include flex(flex-start, flex-start);
  flex-direction: column;
  flex-shrink: 0;
  padding-top: 7px;
  width: 230px;
  box-sizing: border-box;
}
.index-left-item-two-nick {
  margin-bottom: 8px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 22px;
}
.index-left-item-two-type {
  margin-bottom: 8px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #df7935;
  line-height: 22px;
}
.index-left-item-two-company {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2f2f2f;
  line-height: 22px;
}
.index-left-item-three {
  @include flex(space-between, flex-start);
  flex-direction: column;
  padding-top: 7px;
  flex-grow: 1;
  height: 100%;
  box-sizing: border-box;
}
.index-left-item-three-red {
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #d0021b;
  line-height: 22px;
}
.index-left-item-three-black {
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 22px;
}
.index-left-item-three-pic {
  width: 96px;
  height: 96px;
}
.index-left-item-four {
  @include flex(flex-end, flex-end);
  flex-shrink: 0;
  height: 100%;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9e9e9e;
  line-height: 22px;
}
.index-right {
  @include flex(flex-start, center);
  @include text_cut_line;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}
.index-right-title {
  @include flex(flex-start, center);
  flex-shrink: 0;
  width: 100%;
  height: 47px;
  background: #e07a36;
  box-sizing: border-box;
}
.index-right-title-icon {
  flex-shrink: 0;
  margin: 0 10px;
  width: 27px;
  height: 24px;
}
.index-right-title-name {
  flex-shrink: 0;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 25px;
}
.index-right-title-grow {
  flex-grow: 1;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 25px;
}
.index-right-title-more {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 20px;
  cursor: pointer;
}
.index-right-title-go {
  margin: 0 10px 0 6px;
  width: 6px;
  height: 12px;
  cursor: pointer;
}
.index-right-list {
  @include flex(flex-start, center);
  flex-direction: column;
  flex-shrink: 0;
  margin-bottom: 10px;
  padding: 10px;
  width: 100%;
  height: 346px;
  background: #f8f8f8;
  box-sizing: border-box;
}
.index-right-list-item {
  @include flex(flex-start, center);
  margin-bottom: 10px;
  width: 100%;
}
.index-right-list-item:last-child {
  margin-bottom: 0px;
}
.index-right-list-item-left {
  @include flex(center, center);
  flex-shrink: 0;
  margin-right: 10px;
  width: 156px;
  height: 102px;
  background: #f6f6f6;
  box-shadow: 0px 2px 8px 0px rgba(202, 202, 202, 0.5);
  border-radius: 6px;
}
.index-right-list-item-avatar {
  width: 124px;
  height: 84px;
}

.index-right-list-item-msg {
  @include text_cut_line;
  @include flex(flex-start, flex-start);
  flex-direction: column;
  flex-grow: 1;
  height: 102px;
}
.index-right-list-item-msg-title {
  @include text_cut_line;
  margin-bottom: 2px;
  width: 100%;
  text-align: left;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 25px;
}
.index-right-list-item-msg-price {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #d0021b;
  line-height: 22px;
}
.index-right-msg {
  @include flex(flex-start, center);
  flex-direction: column;
  padding: 10px;
  width: 100%;
  flex-grow: 1;
  box-sizing: border-box;
  background: #f8f8f8;
}
.index-right-msg-list {
  @include text_cut_line;
  margin-bottom: 3px;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2f2f2f;
  line-height: 22px;
  cursor: pointer;
}
.index-right-msg-list:last-child {
  margin-bottom: 0px;
}
</style>
